<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>事件监听</title>
</head>
<body>
  <div>
    {{message}}
    <!-- 事件绑定 -->
    <!-- v-on事件绑定 -->
    <input type="button" value="按钮1" v-on:click="fun()">
    <!-- @事件绑定 -->
    <input type="button" value="按钮2" @click="fun()">
    <ul>
      <!-- 鼠标移上来事件 -->
      <li @mouseover="fun1()">hello</li>
    </ul>
  </div>
  <script src="vue.min.js"></script>
  <script>
    new Vue({
      el : "div",
      data : {
        message : "事件绑定"
      },
      methods : { // 在Vue中的methods部分定义函数 不用加function
        fun() {
          // confirm() 弹出带有确定和取消的对话框
          if (confirm("确定吗?")) { // 点击了确定返回true 点击了取消返回false
            alert("点击了确定")
          }
          else {
            alert("点击了取消")
          }
        },
        fun1() {
          alert("鼠标移上来了")
        }
      }
    })
  </script>
</body>
</html>